<template>
    <div class="master-data">
        <el-select
            style="width: 100%;"
            v-model="checkedData"
            filterable
            remote
            reserve-keyword
            :placeholder="parameter.promptTemplate"
            :remote-method="remoteMethod"
            :loading="loading"
            :disabled="readonly"
            value-key="id"
            clearable
            @change="changeData"
            >
            <el-option v-for="item in optionsList" :key="item.id" :label="item.optionName" :value="item"> </el-option>
        </el-select>
    </div>
</template>
<script>
import globalService from "@/services/globalService";
import eventBus from '@/assets/utils/eventBus.js'
export default {
    name: "dataSource",
    props: {
        detail: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        value: [Object, String],
        disabled: Boolean,
        parameter: {
            type: Object,
            default: () => {
                return {}
            } 
        } 
    },
    data(){
        return {
            checkedData: {},
            loading: false,
            optionsList: [],
            readonly: false,
            showFlag: false,
        }
    },
    created(){
        if(this.value){
            this.checkedData = JSON.parse(this.value);
            if(this.checkedData.code || this.checkedData.id){
                this.optionsList = [this.checkedData];
                this.getData();
            }else {
                this.remoteMethod();
            }
        } else {
            this.remoteMethod();
        }
        this.readonly = Boolean(this.$route.query.readonly) || this.disabled
        if(this.$route.query.contractSource == 1 && this.parameter.parameterNumber === 'signTarget'){
            this.readonly = true
        }
    },
    methods: {
        remoteMethod(query){
            const type = this.parameter?.parameterValue?.relationDataType;
            const templateTypeCode = this.detail.templateTypeCode;
            globalService.queryProjectDetailRelatedData({ searchValue: query, type, templateTypeCode }).then(res => {
                if(res.data.resultCode == '0000') {
                    this.optionsList = (res.data.customerInfoList || [])
                }
            })
        },
        changeData(val){
            if(!val) {
                this.$emit('input', '');
                return
            }
            if(!this.$route.query.readonly){
                eventBus.$emit('masterChange', this.parameter, this.checkedData);
            }
            this.getData();
            this.$emit('changeRule');
        },
        getData(){
            const params = {
                customerId: this.checkedData.customerId,
                code: this.checkedData.code,
                companyId: this.checkedData.companyId,
                fullName: this.checkedData.fullName,
                optionName: this.checkedData.optionName,
                id: this.checkedData.id
            }
            this.$emit('input', JSON.stringify(params))
        }
    }
}
</script>
<style lang="scss"></style>